<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Do you know your state capitals?</title>

<link type="text/css" rel="stylesheet" href="capitals.css" />

</head>

<body>

	<div id="header">
    
    	<h1>Do you know your state capitals?</h1>
    
    </div>
    
    	<h2>Use your mouse to rollover each state to find the answer!</h2>
    
        
        
        <div id="stateBox">
            
             <div class="states" onmouseover="alert('Montgomery');">
                 
                 <div class="stateImage">
                    <img src="img/alabama.jpeg"/>
                 </div>
                 
                 <div class="stateName">
                 	<h3>Alabama</h3>
                 </div>
                 
             </div>
             
             
             <div class="states" onmouseover="alert('Juneau');">
                 
                 <div class="stateImage">
                    <img src="img/alaska.jpeg"/>
                 </div>
                 
                 <div class="stateName">
                 	<h3>Alaska</h3>
                 </div>
                 
             </div>
             
             
             <div class="states" onmouseover="alert('Phoenix');">
                 
                 <div class="stateImage">
                    <img src="img/arizona.jpeg"/>
                 </div>
                 
                 <div class="stateName">
                 	<h3>Arizona</h3>
                 </div>
                 
             </div>
             
             
             <div class="states" onmouseover="alert('Little Rock');">
                 
                 <div class="stateImage">
                    <img src="img/arkansas.jpeg"/>
                 </div>
                 
                 <div class="stateName">
                 	<h3>Arkansas</h3>
                 </div>
                 
             </div>
             
             
             <div class="states" onmouseover="alert('Sacramento');">
                 
                 <div class="stateImage">
                    <img src="img/california.jpeg"/>
                 </div>
                 
                 <div class="stateName">
                 	<h3>California</h3>
                 </div>
                 
             </div>
             
             
             <div class="states" onmouseover="alert('Denver');">
                 
                 <div class="stateImage">
                    <img src="img/colorado.jpg"/>
                 </div>
                 
                 <div class="stateName">
                 	<h3>Colorado</h3>
                 </div>
                 
             </div>
               
                
        </div>
    
</body>
</html>
